<template>
    <div class="slot-page">
        <br />
        <ListCom title="日常">
            <template #img>
                <img src="https://images.dog.ceo/breeds/pembroke/n02113023_3563.jpg" />
            </template>
        </ListCom>
        <br />
        <ListCom title="高档">
            <template #other>
                <div class="block-list">
                    <div class="block">1</div>
                    <div class="block">2</div>
                    <div class="block">3</div>
                </div>
            </template>
        </ListCom>
        <br />
        <ListCom title="顶流"></ListCom>
        <br />
        <ListCom title="其他">
            <template #default="{ title }">
                <div>作用域插槽的数据---{{ title }}</div>
            </template>
        </ListCom>
    </div>
</template>
<script setup lang="ts" name="slotPage">
import ListCom from './components/ListCom.vue';
import { ref, reactive } from "vue"

</script>
<style  scoped>
.slot-page {
    width: 60%;
    background: green;
    margin: 50px auto auto auto;
}

.block-list{
    width: 100%;
    display: flex;
}
.block{
    flex: 1;
    margin: 0 10px;
    height: 135px;
    background: pink;
}

</style>
